jQuery Gallery Plugin在Asp.Net中使用
推荐一个简单易用的Gallery插件：
下面是在Asp.Net开发中应用
示例截图：
-------------------------------------------------------------------------------风骚分隔线-----------------------------------------------------------------------------------------------
| 第一步：认识一下这个插属性及事件 |
jQuery Gallery Plugin介绍网站：
图片切换的效果可以结合 jQuery Easing Plugin：
这里主要介绍一个jQuery Gallery Plugin的参数和事件
| 名称 | 介绍 | 类型 | 默认值 |
| 属性 | |||
| barClass | 缩放列表的样式名 | string | 'galleryBar' |
| barPosition | 缩放列表的位置（可填：‘top’ 或者 ‘buttom’） | string | null |
| contentClass | 大图片展示区的样式名 | string | 'galeryContent' |
| descClass | 描述展示区的样式名 | string | 'galleryDesc' |
| easing | 可以用jQuery Easing Plugin做一些图片展示的效果，详情请看: | string | 'linear' |
| height | 大图高（根据图片大小自行设定） | string/integer | null |
| width | 大图宽（根据图片大小自行设定） | string/integer | null |
| thumbHeight | 缩放图高（单位：px) | integer | 55 |
| thumbWidth | 缩放图宽（单位：px) | integer | 55 |
| interval | 定时切换图片（单位：ms) | integer | 4500 |
| infoClass | 文字信息部分样式名 | string | 'galleryInfo' |
| prefix | 前缀 | string | 'gallery_' |
| ratio | 缩放列表和显示文字信息层占整个图片展示区的多少 | float | 0.35 |
| screenClass | 缩放列表和显示文字信息层样式名 | string | 'galleryScreen' |
| showOverlay | 是否显示显示文字信息层 | boolean | true |
| slideshow | 是否自动切换图片及下部的缩放图列表 | boolean | true |
| titleClass | 标题展示区样式名 | string | 'gelleryTitle' |
| toggleBar | 缩放列表是否移上显示，移开隐藏 | boolean | true |
| 事件 | |||
| onChange | 图片改变时触发 function(index, element) | function | |
| onClick | 大图点击时触发 function(event, element) | function | |
| onSelect | 缩放图点击时触发 function(event) | function | |
| 第二步：编写示例代码 |
HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>Porschev-jQuery Gallery Plugin
using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; using System.Collections.Generic; public partial class _Default : System.Web.UI.Page { public string htmlStr = string.Empty; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindData(); } } public void BindData() { #region##这里模拟从数据库里取出图片集合 ImageDataModel img1 = new ImageDataModel("第一张图标题", "Images/1.jpg", "Images/t1.jpg", "第一张大图描述"); ImageDataModel img2 = new ImageDataModel("第二张图标题", "Images/2.jpg", "Images/t2.jpg", "第二张大图描述"); ImageDataModel img3 = new ImageDataModel("第三张图标题", "Images/3.jpg", "Images/t3.jpg", "第三张大图描述"); ImageDataModel img4 = new ImageDataModel("第四张图标题", "Images/4.jpg", "Images/t4.jpg", "第四张大图描述"); List list = new List (); list.Add(img1); list.Add(img2); list.Add(img3); list.Add(img4); #endregion StringBuilder sb = new StringBuilder(); foreach (ImageDataModel model in list) { sb.Append(" ![](\""); "\\"\");")
/// 模拟一个图片实体类 /// public class ImageDataModel { public ImageDataModel(string title, string bigUrl, string thumbUrl, string description) { Title = title; BigUrl = bigUrl; ThumbUrl = thumbUrl; Description = description; } /// /// 标题 /// public string Title { get; set; } /// /// 大图路径 /// public string BigUrl { get; set; } /// /// 小图路径 /// public string ThumbUrl { get; set; } /// /// 描述 /// public string Description { get; set; } } }
注意：1.HTML代码中Id为id_desc的层，通过这个ID，对应输出代码中的A标签的rel属性，可以自定描述，本来A标签Titlen属性就可以做为描述，但是当描述中想加入一些自定义的东西，就要用这种方法;
比如示例中：描述中要加入一个A标签跳转的http://www.dtan.so,那就可以在输出代码中的A标签中加入rel属性，值设置为：id_desc;详情大家可以去试一下;
2.示例采入后台拼接HTML代码输出到页面的方式，也可用Jquery中$.ajax去请求一般处理程序返回结果集，返回结果集;（数据少，拼接html没有问题，如果是大量的图片展示，建议返回JSON结果集）
3.示例只是模拟了一下数据得到数据，没有真正的去连接数据库，不过也无妨，只需要把我#region#标签模拟的部分改为读取数据库业务逻辑方法即可;
4.些插件中A标签中href是大图路径、Title是描述，rel用于对应自定义描述的ID;image标签src中是小图，Title是标题;
5.gallery样式很易改，各部分都有对应样式，可以去样式表按各自需求改对应的样式，样式名和各部分的对应关系可以对照上面的属性表格;
| 第三步：源码下载 |
源码下载地址：
Dtan网站导航 http://www.dtan.so